<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="barCode" ref="uSearch" :focus="focus" placeholder="扫一扫" :show-action="false"
				@custom="search" @search="search"></u-search>
		</view>
		<view style="padding: 0px 10px;">

			<view style="margin-top: 5px;">存货名称: {{list.length?list[0].cInvCode:''}}</view>
			<view style="margin-top: 5px;">规格: {{list.length?list[0].cInvName:''}}</view>
			<view style="margin-top: 5px;">单位: {{list.length?list[0].cInvStd:''}}</view>
			<view style="margin-top: 5px;">数量: {{list.length?list[0].cInvAddCode:''}}</view>
			<view style="margin-top: 5px;">已下架数量: {{list.length?list[0].cInvAddCode:''}}</view>
		</view>
		<view style="margin:10px 5px 10px;">
			<u-table>
				<u-tr>
					<u-th>货位</u-th>
					<u-th>批次</u-th>
					<u-th>数量</u-th>
					<u-th>输入数量</u-th>
				</u-tr>
				<view style=" height: 50vh;overflow: scroll;">
					<!-- @click='detailsTr(item)' -->
					<view v-for="(item,index) in list" :key='index'
						:style="{backgroundColor: item.flag=='1'? 'yellow':item.flag=='2'?'#81b337':''}">
						<!-- <u-swipe-action @click="click(item,index)" :index="index" :options="options"
							:bg-color="'#ffff00'"> -->
						<u-tr v-if="list.length">
							
							<u-td style="word-break: break-all;"> {{item.cBatch}}</u-td>
							<u-td>{{item.cVenAbbName}}</u-td>
							<u-td>{{item.iQuantity}}</u-td>
							<u-td >
								<u-input v-model="item.outQty" :clearable="false" type="number" placeholder="请输入" />
							</u-td>
						</u-tr>
						<!-- </u-swipe-action> -->
					</view>
					<u-empty v-if="!list.length" text="暂无数据" mode="data"></u-empty>
				</view>

			</u-table>
		</view>
		<view style="margin-left: 5px;font-size: 18px;">
			<view style='position:fixed;bottom:10px;width: 98%;text-align: center;padding: 2%;'>
				<u-button size="mini" @click="submit()" type="primary"
					style="width: 98%;height: 40px;color: #fff;font-size: 16px;">提交
				</u-button>
			</view>

		</view>
		<u-popup v-model="groundShow" mode="center" width="80%" height="20%" :closeable="true" border-radius="14">
			<view
				style="height: 100%; padding: 10px;font-size: 16px; display: flex;flex-direction: column;  justify-content: center;">
				<view>
					验证
				</view>
				<u-search v-model="cPosCode" :placeholder="'请先聚焦后扫码'" :show-action="false" @custom="cPoSearch"
					@search="cPoSearch" :focus="hwfocus"></u-search>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					cWhCode: '',
					cWhName: '',
				},
				carVenSelectList: [],
				enterFlag: '1',
				hwfocus: true,
				focus: true,
				cases: 0,
				pieces: 0,
				cWhData: {},
				form: {},
				groundShow: false,
				show: false,
				ckshow: false,
				barCode: '',
				cPosCode: '',
				list: [{},{}],
				flag: '1',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				subdataOut: {
					cWhName: '',
				},
			}
		},
		
		onShow() {},
		onLoad(params) {

		},
		methods: {
			checkboxChange(e) {
			},
			ckSelect(item) {
				this.model = item
			},
			//下拉
			selectConfirm() {
				this.ckshow = false;
				this.carVenSelectList.forEach(item => {
					if (this.model.cWhCode == item.cWhCode) {
						this.cWhData = {
							...this.cWhData,
							...item
						};
					}
				})
				this.$store.commit("modifyCkdbIn", this.cWhData)
				this.empty()
				let flag = true
				this.vuex_vague5.forEach(item => {
					if (this.cWhData.cWhCode == item.cWhCode) {
						flag = false;
					}
				})
				if (flag) {
					this.vuex_vague5.unshift(this.cWhData)
					let arr = [...this.vuex_vague5]
					this.$store.commit("modifyVague5", arr.splice(0, 5))
				}
			},


			// 上架
			out(type) {
				this.enterFlag = type
				this.focus = false;
				if (this.list.length) {
					this.groundShow = true;
					this.hwfocus = true;
					this.flag = '0';
				} else {
					this.$u.toast('请先扫描条码')
					setTimeout(() => {
						this.focus = true;
					}, 500)
				}
			},




			// 清空
			empty() {
				this.barCode = '';
				this.cases = 0;
				this.pieces = 0;
				this.list = [];
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500)
			},

			// 清货位
			clearing() {
				let _this = this
				_this.focus = false
				if (this.list.length) {
					uni.showModal({
						title: '提示',
						content: '是否清除全部货位',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								let newArr = _this.list.map(item => {
									item.cPosNameAfter = ''
									item.cPosCodeAfter = ''
									item.flag = 0
									return item
								})
								_this.barCode = '';
								_this.list = newArr;
								_this.cases = 0;
								_this.pieces = 0;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							setTimeout(() => {
								_this.focus = true;
							}, 500)

						}
					});
				} else {
					this.$u.toast('请先扫描产品条码')
					// this.$refs.jsError.showError('', '请先扫描产品条码！', 'info');
					setTimeout(() => {
						_this.focus = true;
					}, 500)
				}

			},

			// 条码获取数据
			loadList(BarCode) {
				var _this = this;
				_this.focus = false;
				this.$u.api.tm.getTransVouchtask({
					BarCode,
					cWhCode: this.cWhData.cWhCode,
				}).then(res => {
					if (res.statecode == '1') {
						if (res.subdata.length) {
							if (!this.cases) {
								this.list = res.subdata
								// this.list.push(res.subdata[0])
								let num = 0;
								this.list.forEach(item => {
									if (BarCode == item.BarCode) {
										item.flag = 1
										num += item.iQuantity;
									}
								})
								this.cases++;
								this.pieces = num
								// this.barCode = '';
							}

						} else {

							this.$u.toast('该条码暂无数据');
						}
					} else {
						// _this.list = []
						// _this.sendMp3('bcz');
						// this.$u.toast(res.message);

						this.$u.toast(res.message);
					}
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
					}, 500)
				})

			},

			// 货位搜索
			cPoSearch(cPosCode) {
				this.hwfocus = false;
				this.$u.api.tm.getPosition({
					cWhCode: this.cWhData.cWhCode,
					cPosCode
				}).then(res => {
					if (res.statecode == '1') {
						let istrue = true;
						let newArr = this.list.map(item => {
							if (item.cPosCode && item.flag == '1' && item.cPosCode != res.subdata
								.cPosCode) {
								istrue = false;
							}
							return item
						})
						this.cPosCode = ''
						if (!istrue) {
							// this.list = newArr
							this.groundShow = false;
							this.$u.toast('上架货位必须和值应货位一致');
						} else {
							let newArr = this.list.map(item => {
								if (!item.cPosNameAfter && item.flag == '1') {
									// item.cPosCode = res.subdata.cPosCode
									// item.cPosName = res.subdata.cPosName
									item.flag = 2;
									item.cPosNameAfter = res.subdata.cPosName
									item.cPosCodeAfter = res.subdata.cPosCode
								}
								return item;
							})

							this.list = newArr
							this.groundShow = false;
							// this.$u.toast(res.message);
						}

						this.cPosCode = ''
						setTimeout(() => {
							this.barCode = '';
							this.focus = true;
						}, 500)

					} else {

						this.cPosCode = ''
						this.$u.toast(res.message);
						setTimeout(() => {
							this.barCode = '';
							this.focus = true;
							this.hwfocus = true;
						}, 500)
					}

				})
			},
			// 箱码搜索
			search(value) {
				let _this = this;
				_this.focus = false;
				let str = value.slice(0, 3)
				if (str == '|Rd') {
					this.barSearch(value)
				} else if (str == '||K') {
					if (this.list.length) {
						this.cPoSearch(value)
						this.flag = '0';
					} else {
						this.$u.toast('请先扫描产品条码！');
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
						}, 500)
					}
					console.log(value, 'value===')
				} else {
					this.$u.toast('条码格式错误');
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
						// _this.searchfocus()
					}, 500);
				}






			},
			barSearch(value) {
				let _this = this;
				if (!this.list.length) {
					this.loadList(value);
				} else {
					let isTrue = true
					let batchFlag = true
					let newArr = this.list.map(item => {
						if (item.BarCode == value && item.flag) {
							batchFlag = false
						}
						if (item.BarCode == value && !item.flag) {
							_this.cases++;
							_this.pieces += item.iQuantity
						}
						if (item.BarCode == value) {
							isTrue = false;
						}
						if (item.BarCode == value && item.flag != '2') {
							item.flag = '1';
						}
						return item
					})
					if (isTrue) {
						uni.showModal({
							title: '提示',
							content: '该条码不是同一批任务，如需继续请先清空表格数据',
							showCancel: false,
							success: function() {
								// _this.searchfocus()
								setTimeout(() => {
									_this.barCode = '';
									_this.focus = true;
								}, 500);
							}
						});
						// this.$refs.jsError.showError('', '该条码不是同一批任务，如需继续请先清空表格数据', 'warn');
					} else {
						if (!batchFlag) {
							this.$u.toast('请勿重复扫描');
							// this.$refs.jsError.showError('', '请勿重复扫描', 'info');
						}
						this.list = newArr
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
							// _this.searchfocus()
						}, 500);

					}

				}
			},
			// 提交
			submit() {
				let _this = this
				_this.focus = false
				if (!this.list.length) {
					this.$u.toast('请先扫描产品条码');
				} else {
					let rkFlag = true;
					this.list.forEach(item => {
						if (!item.cPosCodeAfter || !item.cPosNameAfter) {
							rkFlag = false
						}
					})
					if (rkFlag) {
						let newArr = this.list.map(item => {
							let obj = {
								// "cMaker": this.$store.state.vuex_subdata.UserName,
								"BarCode": item.BarCode,
								"cWhCode": this.cWhData.cWhCode,
								"cPosCode": item.cPosCode,
								"cAPosCode": item.cPosCodeAfter,
								"cMaker": this.vuex_subdata.UserName,
							}
							return obj
						})

						this.$u.api.tm.setTransVouchtaskAdd(newArr).then(res => {
							if (res.statecode == '1') {
								this.$u.toast(res.message);
								// this.$refs.jsError.showError('', res.message, 'info');
								this.cases = 0;
								this.pieces = 0;
								this.list = []

							} else {
								// this.$u.toast(res.message);
								this.$refs.jsError.showError('', res.message, 'info');
							}
							setTimeout(() => {
								_this.focus = true;
							}, 500)

						})

						console.log(newArr)
					} else {
						this.$u.toast('请先全部上架后在提交');
						// this.$refs.jsError.showError('', '请先全部添加调整后货位在提交', 'error');
					}

				}
				setTimeout(() => {
					_this.focus = true;
				}, 500)
			},

			// 删除单个货位
			click(item, index) {

				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除本条数据',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							_this.list.splice(index, 1);
							_this.cases = _this.cases - 1;
							_this.pieces = _this.pieces - item.iQuantity
							let newArr = [..._this.list]
							_this.list = []
							setTimeout(() => {
								_this.list = newArr
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				});
			},

		}
	}
</script>

<style scoped>
	/deep/ .u-checkbox__label{
		display: none ;
	}
</style>